<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
</head>
<body>

    <!-- 定义一个容器 -->
    <div id="myChart" style="width:500px;height:500px"></div>
   
    <script>
        let chartDom=document.getElementById("myChart");
        let myChart=echarts.init(chartDom);
        let option={
            title: {
                text: '饼状图'
            },
            tooltip: {},
            legend:{//数据交互按钮
                data:["袜子","羊毛衫","雪纺衫","裤子"],
                orient:"horizontal",//数据交互按钮的排列方向,horizontal、vertical
                left:100
            },
         
            series: [
                {
                    name: '销量',
                    type: 'pie',
                    // left:400,
                    center:[200,280],//圆心
                    radius:[0,100],//半径，内半径和外半径
                    selectedMode:"series",//single、multiple、series
                    data: [
                        {
                            name:"袜子",
                            value:100
                        },
                        {
                            name:"羊毛衫",
                            value:90
                        },
                        {
                            name:"雪纺衫",
                            value:120
                        },
                        {
                            name:"裤子",
                            value:230
                        }


                    ]
                }
            ]
        };
        myChart.setOption(option);

    </script>
</body>
</html>